<template>
  <div>
    <div class="step"><span>首页</span> > 权限管理 > 角色列表</div>
    <!-- 添加角色 -->
    <el-card>
      <el-button class="add" @click="addBtn()" type="primary"
        >添加角色</el-button>
      <!-- prefix-icon="el-icon-search" 该属性可以在input框内添加icon -->
    </el-card>
    <!-- 表格 -->
    <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      width="50">
    </el-table-column>
    <el-table-column
      prop="id"
      label="#"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="角色名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="looklike"
      label="角色描述"
      width="180">
    </el-table-column>
    <el-table-column prop="todo" label="操作" width="500">
        <template slot-scope="scope">
          <div>
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"

              @click="editUser(scope.row)"
            >编辑
            </el-button>
            <el-button
              icon="el-icon-delete-solid"
              type="danger"
              size="mini"

              @click="del(scope.row)"
            >删除
              <!-- scope 是一个特殊的对象，它代表当前行的数据和其他相关信息。
                   在这个代码中，scope.$index 表示当前行的索引，即该行数据在表格数据数组中的位置。 -->
            </el-button>
            <el-button
              icon="el-icon-s-tools"
              type="warning"
              size="mini"

              @click="setting(scope.row)"
            >分配权限
            </el-button>
          </div>
        </template>
      </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 1,
          name: '搬运工',
          looklike: '123123',
          todo: '操作',
          children: [{
            id: 1 - 1,
            name: '搬运工',
            looklike: '123123'
          }, {
            id: 1 - 2,
            name: '搬运工',
            looklike: '123123'
          }]
        }
      ]
    }
  },
  methods: {
    addBtn () {
      alert()
    }
  }
}
</script>

<style scoped lang="scss">
.step {
  width: 300px;
  height: 40px;
  margin-left: -50px;
  span {
    font-weight: bold;
  }
}
.is-always-shadow {
  height: 78px;
  margin-top: 0px;
  box-shadow: 0 0px 0 rgba(0, 0, 0) !important;
}
.add {
  position: absolute;
  left: 20px;
  top: 20px;
  height: 39px;
}
.el-table .el-button:nth-of-type(1),.el-table .el-button:nth-of-type(2){
  width: 70px;;
}
</style>
